<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2023-11-07 09:43:46
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2023-11-23 15:36:23
 * @FilePath: /hr_new_vue3/src/views/Management/Contract/BaseSetting/ContractTemplate/Components/AddTemplate/ContractBaseInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 合同基础设置 -->
<template>
  <div class="step1">
    <a-form :model="formData" ref="refForm" auto-label-width>
      <a-form-item label="员工姓名" field="name" show-colon>
        <HumanMultipleModal :disabled="true" ref="refHumanMultipleModal" v-model:values="userIds" />
      </a-form-item>
      <a-form-item label="选择合同单位" field="companyId" show-colon required :rules="[
          {
            required: true,
            message: '请选择'
          }
        ]">
        <a-select v-model="formData.companyId">
          <a-option v-for="item in lawList" :key="item.id" :value="item.id" :label="item.name" />
        </a-select>
      </a-form-item>
      <a-form-item label="选择合同内容" field="contractTemplateType" show-colon required>
        <a-radio-group @change="changeGroup" v-model="formData.contractTemplateType">
          <a-radio :value="1">
            <template #radio="{ checked }">
              <a-space align="start" class="custom-radio-card" :class="{ 'custom-radio-card-checked': checked }">
                <div className="custom-radio-card-mask">
                  <div className="custom-radio-card-mask-dot" />
                </div>
                <div>
                  <div className="custom-radio-card-title">上传合同</div>
                  <a-typography-text type="secondary">
                    选择本地电子版合同上传
                  </a-typography-text>
                </div>
              </a-space>
            </template>
          </a-radio>
          <a-radio :value="2">
            <template #radio="{ checked }">
              <a-space align="start" class="custom-radio-card" :class="{ 'custom-radio-card-checked': checked }">
                <div className="custom-radio-card-mask">
                  <div className="custom-radio-card-mask-dot" />
                </div>
                <div>
                  <div className="custom-radio-card-title">选择模板</div>
                  <a-typography-text type="secondary">
                    选择合同配置模板
                  </a-typography-text>
                </div>
              </a-space>
            </template>
          </a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item v-if="formData.contractTemplateType === 1" label="上传合同模板" show-colon required>
        <UploadFile :autoUpload="true" class="file" ref="uploadRef" v-model:fileList="formData.uploadContract" :draggable="false" tip="请上传JPG、JPEG、PNG、DOC、DOCX、PDF、EXCEL、XLSX、XLS格式" :fileTypeList="fileTypeList" :userId="userIds[0]" :type="6" :limit="1" />
      </a-form-item>
      <a-form-item v-if="formData.contractTemplateType === 2" label="选择合同模板" show-colon required>
        <a-input @focus="(e) => selectContractTemplate(e, 'contractTemplate')" v-model="contractTemplate.name" />
      </a-form-item>
      <a-form-item label="选择附件模板" field="annexName" show-colon>
        <a-input @focus="(e) => selectContractTemplate(e, 'annexTemplate')" :modelValue="contractAnnexList.map(({ name }) => name).join(',')" />
      </a-form-item>
      <a-form-item label="描述" field="remark" show-colon>
        <a-textarea v-model="formData.remark" show-word-limit :max-length="50" :auto-size="{
            minRows: 4
          }" />
      </a-form-item>
    </a-form>
  </div>
  <ContractTemplateModal v-model:visible="contractTemplateVisible" @contract-template-emit="contractTemplateEmit" />
  <ContractAttachmentTemplateModal v-model:visible="contractAttachmentTemplateVisible" @contractAttachmentTemplateEmit="contractAttachmentTemplateEmit" />
</template>

<script setup lang="ts">
import uniqueid from 'lodash.uniqueid';
import { useContractStore } from '@/store';
import { useVModel } from '@vueuse/core';
import { cloneDeep } from 'lodash';
import { PerformanceAppraisal } from '@/apis/management/performance/baseSetting/template/type';
import { GetLegalEntityList } from '@/apis/management/organization/organizationManagement/LegalEntity/index';
import { Message } from '@arco-design/web-vue';

const emit = defineEmits(['changeStepData']);
let formData = ref<any>({ uploadContract: [], contractTemplateType: 1 });
const refForm = ref();
const uploadRef = ref();
let contractTemplateVisible = ref(false);
let contractAttachmentTemplateVisible = ref(false);
const fileTypeList = [
  '.png',
  '.jpeg',
  '.jpg',
  '.doc',
  '.docx',
  '.pdf',
  '.xls',
  '.xlsx'
];
const selectContractTemplate = (
  e: Event,
  type: 'contractTemplate' | 'annexTemplate'
) => {
  if (type === 'contractTemplate') {
    contractTemplateVisible.value = true;
  } else {
    contractAttachmentTemplateVisible.value = true;
  }
};
const changeGroup = (e) => {
  formData.value.contractTemplateType = e;
  formData.value.uploadContract = [];
  if (e === 1) {
    for (const key in contractTemplate) {
      delete contractTemplate[key];
    }
    emit('changeStepData', 1);
  } else {
    emit('changeStepData', 2);
  }
};
let refHumanMultipleModal = ref();
let userIds = ref<any[]>([]);
defineExpose({
  setData(data: any, ids: any[]) {
    Object.assign(formData.value, data);
    userIds.value = ids;
  },
  async getData() {
    console.log(formData.value);
    if (await refForm.value.validate()) return Promise.reject('数据错误');
    if (!contractTemplate.id && formData.value.contractTemplateType === 2) {
      Message.error('未选择模板');
      return Promise.reject('数据错误');
    }
    if (formData.value.contractTemplateType === 1) {
      if (uploadRef.value.uploadList.length === 0) {
        Message.error('未上传本地合同');
        return Promise.reject('数据错误');
      } else {
        formData.value.uploadContract = uploadRef.value.uploadList;
      }
    }
    return {
      form: cloneDeep({ ...formData.value }),
      templateList: [
        formData.value.contractTemplateType === 2
          ? { ...contractTemplate }
          : {
              id: formData.value.uploadContract[0].response.id,
              fileName: formData.value.uploadContract[0].response.useFileName,
              fileUrl: formData.value.uploadContract[0].response.DownloadPath,
              uuid: formData.value.uploadContract[0].uuid,
              name: formData.value.uploadContract[0].response.useFileName
            },
        ...contractAnnexList.value
      ].map((item) => {
        delete item.uuid;
        return { uuid: uniqueid(''), ...item };
      }),
      userInfo: refHumanMultipleModal.value.getChoiceList()
    };
  }
});

let contractTemplate = reactive<any>({});
// 合同模板弹出框自定义事件
const contractTemplateEmit = ([data]: any[]) => {
  for (const key in contractTemplate) {
    delete contractTemplate[key];
  }
  Object.assign(contractTemplate, data);
  formData.value.templateId = data.id;
  formData.value.typeId = data.typeId;
};

let contractAnnexList = ref<any[]>([]);
// 附件弹出框自定义事件
const contractAttachmentTemplateEmit = (data: any[]) => {
  contractAnnexList.value = data;
};

let lawList = ref<any[]>([]); // 储存企业签署方数据
const initializedData = async () => {
  try {
    const [lawListRes] = await Promise.all([
      GetLegalEntityList({
        pageNumber: 0,
        pageSize: -1
      })
    ]);
    lawList.value = lawListRes.content;
  } catch (error: unknown) {
    console.log(error);
  }
};
initializedData();
</script>

<style lang="less" scoped>
.step1 {
  width: 700px;
  margin: 0 auto;
  padding-top: 50px;
}

.custom-radio-card {
  padding: 10px 16px;
  border: 1px solid var(--color-border-2);
  border-radius: 4px;
  width: 250px;
  box-sizing: border-box;
}

.custom-radio-card-mask {
  height: 14px;
  width: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  border: 1px solid var(--color-border-2);
  box-sizing: border-box;
}

.custom-radio-card-mask-dot {
  width: 8px;
  height: 8px;
  border-radius: 100%;
}

.custom-radio-card-title {
  color: var(--color-text-1);
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}

.custom-radio-card:hover,
.custom-radio-card-checked,
.custom-radio-card:hover .custom-radio-card-mask,
.custom-radio-card-checked .custom-radio-card-mask {
  border-color: rgb(var(--primary-6));
}

.custom-radio-card-checked {
  background-color: var(--color-primary-light-1);
}

.custom-radio-card:hover .custom-radio-card-title,
.custom-radio-card-checked .custom-radio-card-title {
  color: rgb(var(--primary-6));
}

.custom-radio-card-checked .custom-radio-card-mask-dot {
  background-color: rgb(var(--primary-6));
}
</style>
